<template>
  <p>num: {{num}}</p>
  <p>double: {{double}}</p>

  <br />

  <p @click="handleClick">{{obj.age}}</p>


</template>

<script>

import { reactive, toRef, computed, ref } from 'vue'

export default {
  name: 'App',
  setup (props, context) {

    const num = ref(2)

    const double = computed(() => num.value * 2)

    setTimeout(() => {
      num.value = 4
    }, 2000);

    // 可以设置getter setter

    const obj = reactive({
      age: 10
    })

    const handleClick = () => {
      obj.age += 1
    }

    let computedObjAge = computed({
      get: () => {
        return obj.age + 10
      },
      set: (param) => {
        obj.age = param
      }
    })

    setTimeout(() => {
      computedObjAge.value = 100
    }, 2000);

    return {
      num,
      double,
      obj,
      handleClick
    }
  }
}
</script>

<style>

</style>
